<template>
<div class="mSituationFinish">
  <div class="mSP-header">
    <span>{{ '学业情况' }}</span>
    <div class="msp-header-input">
      <el-input v-model="studentName" style="width: 200px; margin-right: 20px;" placeholder="搜索姓名" 
      :suffix-icon="Search" @change=""/>
      <el-select v-model="xn" placeholder="请选择学年" style="width: 120px; margin-right: 20px;">
        <el-option label="2023-2024学年" value="2023-2024学年" />
      </el-select>
      <el-select v-model="nj" placeholder="请选择年级" style="width: 120px;">
        <el-option label="2024级" value="2024" />
      </el-select>
    </div>
  </div>
  <!-- 版心 -->
   <div class="msp-main">
    <el-table :data="mentorSituationStore.mSFinishData" style="width: 100%; height: 90%; font-size: 18px;">
      <el-table-column prop="username" label="姓名" min-width="80"/>
      <el-table-column prop="id" label="学号" min-width="80"/>
      <el-table-column prop="grade" label="年级" min-width="80"/>
      <el-table-column prop="major" label="专业" min-width="120"/>
      <el-table-column prop="classname" label="班级" min-width="100"/>
      <el-table-column prop="questionnaireName" label="任务名称" min-width="120"></el-table-column>
      <el-table-column prop="do" label="操作" width="90">
        <template #default="{row}">
          <el-button link type="primary" size="large"
          @click="mentorDetailClick(row)" style="font-size: 14px; color: #165dff;">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
        <!-- 底部分页器 -->
    <div class="footer">
      <div class="left">
        <div class="total">共计: {{ mentorSituationStore.mSFinishData.length }} 条</div>
      </div>
      <div class="right">
        <div class="pagination">
          <el-pagination
            v-model="currentPage"
            layout="prev, pager, next"
            :total="mentorSituationStore.mSFinishData.length ||0"
            :page-size="pageSize"
            background
            size="small"
            @current-change="handleCurrentChange"
          />
        </div>
        <div class="selector">
          <el-select v-model="pageSize" placeholder="每页条数" style="width: 80px;"
           size="small" @size-change="handleSizeChange">
            <el-option label="5条/页" :value="5"></el-option>
            <el-option label="10条/页" :value="10"></el-option>
            <el-option label="20条/页" :value="20"></el-option>
          </el-select>
        </div>
        <div class="jump">
          <span>前往:</span>
          <el-input-number
            v-model="currentPage"
            :min="1"
            :max="Math.ceil(mentorSituationStore.mSFinishData.length||1 / pageSize)"
            :controls="false"
            style="width: 3vw;"
            size="small"
          />
        </div>                        
      </div>
    </div>
   </div>
</div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref,onBeforeMount } from 'vue'
import router from '@/router';
import { useMentorSituationStore } from '@/stores/mentor/mSituation';

const mentorSituationStore = useMentorSituationStore()
// 搜索框学生姓名
let studentName = ref('')
let xn = ref('')
let nj = ref('')
onBeforeMount(() => {
  mentorSituationStore.mSFinishRequest(studentName.value,xn.value,nj.value,currentPage.value,pageSize.value)
})

const mentorDetailClick = (row) => {
  router.push({
    path: '/mentor/mentorSituation/mSituationDetail',
    query: { 
      hideBottom: true,
      id:row.id,
      userName:row.username,
      grade:row.grade,
      major:row.major,
      classname:row.classname,
      questionnaireName:row.questionnaireName,
      state:'已完成'
     }  // 添加查询参数
  })
}
// 当前在第几页
let currentPage = ref(1)
const pageSize = ref(5); // 每页显示的条数

 // 监听分页变化
const handleCurrentChange = async(page) => {
  currentPage.value = page;
  mentorSituationStore.mSFinishRequest(studentName.value,xn.value,nj.value,currentPage.value,pageSize.value)
};
// 监听每页条数变化
const handleSizeChange = async(size) => {
  pageSize.value = size;
  currentPage.value = 1;
  mentorSituationStore.mSFinishRequest(studentName.value,xn.value,nj.value,currentPage.value,pageSize.value)
};

</script>

<style scoped lang="scss">
.mSituationFinish {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .mSP-header {
    margin: 0 10px;
    width: 98%;
    height: 55px;
    border-bottom: 2px solid #ebecf0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      margin-left: 10px;
      font-size: 20px;
      font-weight: 500;
      padding-right: 25px;
      border-right: 1px solid #ebecf0;
    }
    .msp-header-input {
      display: flex;
    }
  }
  // 版心
  .msp-main {
    flex: 1;
    margin: 10px;
    box-shadow: 0px 0px 5px #c5c5c7;
    .footer {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
        width: fit-content;
        .total {
            padding-left: 15px;
            font-size: 12px;
        }
    }
    .right{
        width: fit-content;
        height: 100%;
        display: flex;
        align-items: center;
        .pagination, .selector{
            margin-right: 15px;
        }
        .jump{
            margin-right: 15px;
            span{
                margin-right: 5px;
                font-size: 12px;
            }
        }
    }
}
  }
}

:deep(.el-input__wrapper),
:deep(.el-select__wrapper) {
  background-color: #f2f3f5;
}
:deep(.el-table th) {
  background-color: #f2f3f5;
  height: 48px;
  color: black;
  font-weight: normal;
}
:deep(.el-table tr) {
  font-size: 16px;
}
</style>